<template>
  <div class="pos-info">
    <p class="detail-title">
      职位信息<span class="btn" v-if="showView" @click="toggleView">编辑</span>
    </p>
    <div class="com-container" v-if="showView">
      <div class="show-item">
        <p class="name">
          <span>职位名称:</span>
          <span :title="posInfo.name">{{ posInfo.name }}</span>
        </p>
        <p class="address">
          <span>工作地点:</span>
          <span
            :title="
              posInfo.other_name || (posInfo.city_cn && posInfo.city_cn.name)
            "
            >{{
              posInfo.other_name || (posInfo.city_cn && posInfo.city_cn.name)
            }}</span
          >
        </p>
        <p class="money">
          <span>薪资待遇:</span>
          <span v-if="posInfo.payid"
            >{{ posInfo.payid }} - {{ posInfo.pay_end }}k</span
          >
          <span v-else></span>
        </p>
        <p class="jobType">
          <span>职位类型:</span>
          <span>{{ posInfo.is_all_cn }}</span>
        </p>
      </div>
      <div class="show-item">
        <p class="pos">
          <span>岗位性质:</span>
          <span>{{ posInfo.f_id_cn }}</span>
        </p>
        <p class="edu">
          <span>学历要求:</span>
          <span>{{ posInfo.eid_cn }}</span>
        </p>
        <p class="num">
          <span>招聘人数:</span>
          <span>{{ posInfo.num }}</span>
        </p>
        <p class="time">
          <span>投递截止日期:</span>
          <span>{{ posInfo.end_time_cn }}</span>
        </p>
      </div>
    </div>
    <div class="com-form" v-else>
      <div class="postForm">
        <div class="form-item">
          <div class="text" required>职位名称:</div>
          <div class="input">
            <input
              v-model="posInfo.name"
              type="text"
              placeholder="请输入职位名称"
            />
          </div>
        </div>
        <div class="form-item">
          <div class="text" required>工作地点:</div>
          <div class="select">
            <client-only>
              <el-select
                v-model="posInfo.cityid"
                filterable
                placeholder="选择工作地点"
                @change="changeCity"
              >
                <el-option
                  v-for="(item, i) in cityList"
                  :key="'cityList_' + i"
                  :label="item.name"
                  :value="item.id"
                  class="city-item"
                >
                  <!-- <slot>
                    <span style="float: left">{{ item.name }}</span>
                    <span
                      style="float: right; color: #8492a6; font-size: 13px"
                      >XX</span
                    >
                  </slot> -->
                </el-option>
              </el-select>
            </client-only>
          </div>
          <p class="little">注：若没有匹配地点，请选择【其他】，并在本网页底端【其他信息】中填写工作地点。</p>
        </div>
        <!-- 
        <div class="form-item" v-if="posInfo.cityid === 0">
          <div class="text" required>填写工作地:</div>
          <div class="input">
            <input
              v-model="posInfo.other_name"
              type="text"
              placeholder="请输入工作地"
            />
          </div>
        </div>
         -->
        <div class="form-item">
          <div class="text" required>最低薪资:</div>
          <div class="input">
            <input
              v-model="posInfo.payid"
              type="text"
              placeholder="请输入最低薪资(单位K)"
            />
          </div>
        </div>
        <div class="form-item">
          <div class="text" required>最高薪资:</div>
          <div class="input">
            <input
              v-model="posInfo.pay_end"
              type="text"
              placeholder="请输入最高薪资(单位K)"
            />
          </div>
        </div>
        <div class="form-item">
          <div class="text" required>截止日期:</div>
          <div class="select small">
            <client-only>
              <el-select
                v-model="year"
                @change="toSetDayList"
                placeholder="选择年"
              >
                <el-option
                  v-for="item in yearList"
                  :key="item"
                  :value="item"
                  :label="item + '年'"
                >
                </el-option>
              </el-select>
              <el-select
                v-model="month"
                @change="toSetDayList"
                placeholder="选择月"
              >
                <el-option
                  v-for="item in monthList"
                  :key="item"
                  :value="item"
                  :label="item + '月'"
                >
                </el-option>
              </el-select>
              <el-select v-model="day" placeholder="选择日">
                <el-option
                  v-for="item in dayList"
                  :key="item"
                  :value="item"
                  :label="item + '日'"
                >
                </el-option>
              </el-select>
            </client-only>
          </div>
        </div>
        <div class="form-item">
          <div class="text" required>职位类型:</div>
          <div class="select">
            <client-only>
              <el-select
                v-model="posInfo.is_all"
                placeholder="选择职位类型"
                @change="changeJob"
              >
                <el-option
                  v-for="(item, i) in jobTypeList"
                  :key="'jobTypeList_' + i"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </client-only>
          </div>
        </div>
        <div class="form-item">
          <div class="text" required>岗位性质:</div>
          <div class="select">
            <client-only>
              <el-select
                v-model="posInfo.f_id"
                placeholder="选择岗位性质"
                @change="changeType"
              >
                <el-option
                  v-for="(item, i) in postTypeList"
                  :key="'postTypeList_' + i"
                  :label="item.tagname"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </client-only>
          </div>
        </div>
        <div class="form-item">
          <div class="text" required>学历要求:</div>
          <div class="select">
            <client-only>
              <el-select
                v-model="posInfo.eid"
                placeholder="选择学历"
                @change="changeEdu"
              >
                <el-option
                  v-for="(item, i) in eduList"
                  :key="'eduList_' + i"
                  :label="item.tagname"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </client-only>
          </div>
        </div>
        <div class="form-item">
          <div class="text" required>招聘人数:</div>
          <div class="input">
            <input
              v-model="posInfo.num"
              type="text"
              placeholder="请输入招聘人数"
            />
          </div>
        </div>

        <div class="submit">
          <button class="confirm" type="button" @click="submit">保存</button>
          <button class="cancel" type="button" @click="cancel">取消</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getCurYear, getMonth, getDay } from '@/utils/constant';
export default {
  props: ['info', 'postType', 'city', 'edu'],
  data () {
    return {
      showView: true,
      posInfo: {
      },
      yearList: [],
      monthList: [],
      dayList: [],
      jobTypeList: [
        { id: 0, name: '实习' },
        { id: 1, name: '全职' },
      ],
      postTypeList: [],
      cityList: [],
      eduList: [],
      year: '',
      month: '',
      day: ''
    }
  },
  watch: {
    info (val) {
      this.posInfo = val;
      if (val.end_time_cn) {
        this.formatterDate(val.end_time_cn);
      }
    },
    postType (val) {
      this.postTypeList = val;
    },
    city (val) {
      this.cityList = val;
    },
    edu (val) {
      this.eduList = val;
    },
  },
  created () {
    this.posInfo = this.info;
    if (this.info.end_time_cn) {
      this.formatterDate(this.info.end_time_cn);
    }
    this.postTypeList = this.postType;
    this.cityList = this.city;
    this.eduList = this.edu;
    this.yearList = getCurYear();
    this.monthList = getMonth();
    this.dayList = getDay();
  },
  mounted () {
  },
  methods: {
    formatterDate (time) { // 格式化时间
      if (time) {
        const timeList = time.split('-');
        if (timeList.length === 3) {
          this.year = timeList[0];
          this.month = timeList[1];
          this.day = timeList[2];
        }
      }
    },
    toSetDayList () {
      if (this.year && this.month) {
        this.dayList = getDay(this.year, this.month);
      }
    },
    changeCity (data) {
      data !== 0 && this.posInfo.other_name && (this.posInfo.other_name = '');
      this.posInfo.cityid = data;
      const curOne = this.cityList.find(s => s.id === data);
      this.posInfo.city_cn = {
        name: curOne ? curOne.name : ''
      };
    },
    changeJob (data) {
      this.posInfo.jobType = data;
      const curOne = this.jobTypeList.find(s => s.id === data);
      this.posInfo.is_all_cn = curOne ? curOne.name : '';
    },
    changeType (data) {
      this.posInfo.f_id = data;
      const curOne = this.postTypeList.find(s => s.id === data);
      this.posInfo.f_id_cn = curOne ? curOne.tagname : '';
    },
    changeEdu (data) {
      this.posInfo.eid = data;
      const curOne = this.eduList.find(s => s.id === data);
      this.posInfo.eid_cn = curOne ? curOne.tagname : '';
    },
    toggleView () {
      this.showView = false;
    },
    toDelete (index) {
      this.list.splice(index, 1);
    },
    cancel () {
      this.showView = true;
    },
    submit () {
      this.showView = true;
      this.posInfo.end_time_cn = `${this.year}-${this.month}-${this.day}`
    },
  }
}
</script>
<style lang="scss" scoped>
.pos-info {
  position: relative;
  .com-container {
    padding: 10px 0;
  }
  .show-item {
    height: 30px;
    line-height: 30px;
    padding-left: 20px;
    margin: 10px 0;
    & > p {
      line-height: 30px;
      display: inline-block;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      span {
        line-height: 30px;
        &:first-child {
          color: #999;
          margin-right: 10px;
        }
        &:last-child {
          color: #666;
        }
      }
    }
    .name,
    .pos {
      width: 350px;
    }
    .address,
    .edu {
      width: 210px;
    }
    .money,
    .num {
      width: 240px;
    }
    .jobType,
    .time {
      width: 300px;
    }
  }
  .com-form {
    padding: 30px 0;
    .postForm {
      width: 500px;
      margin: 0 auto;
      .form-item {
        margin-bottom: 10px;
        line-height: 40px;
        & > div {
          display: inline-block;
        }
        & > .text {
          position: relative;
          padding-left: 20px;
          min-width: 120px;
          color: #24292f;
          vertical-align: top;
          &[required] {
            &::before {
              content: '*';
              position: absolute;
              left: 0px;
              top: 0px;
              color: $base-color-danger;
            }
          }
        }
        .input {
          input {
            line-height: 28px;
            border: 1px solid #ccc;
            border-radius: 4px;
            padding: 0 10px;
            width: 350px;
            font-size: 16px;
            &:active,
            &:focus {
              border-color: $base-color;
            }
          }
        }
        label {
          margin-right: 30px;
          cursor: pointer;
        }
        .select {
          ::v-deep .el-input__inner {
            width: 350px;
            height: 30px;
            line-height: 30px;
            border: 1px solid #ccc;
            font-size: 16px;
            color: #24292f;
            padding-right: 20px;
            &:active,
            &:focus {
              border-color: $base-color;
            }
          }
          &.small {
            ::v-deep .el-input__inner {
              width: 100px;
              padding-right: 20px;
              margin-right: 20px;
            }
            ::v-deep .el-input__suffix {
              right: 20px;
            }
          }
        }
        .little {
          text-align: center;
          font-size: 12px;
          color: #999;
        }
      }
      .submit {
        margin-top: 60px;
        text-align: center;
        button {
          height: 45px;
          width: 150px;
          margin: 0 20px;
          border: 1px solid $base-color;
          border-radius: 6px;
          font-size: 16px;
          &:hover {
            box-shadow: 0 0 6px 0 $base-color;
          }
        }
        .cancel {
          background: #fff;
          color: $base-color;
        }
        .confirm {
          background: $base-color;
          color: #fff;
        }
      }
    }
  }
}
</style>
<style lang="scss">
.el-select-dropdown {
  min-height: 100px;
  max-width: 470px;
  .city-item {
    float: left;
    padding: 0 10px;
    min-width: 90px;
    box-sizing: border-box;
    text-align: center;
  }
}
</style>
